class Vue {
    constructor(obj_instance){
        // new 时传的对象
       this.$data = obj_instance.data
       Observer(this.$data)
       Complie(obj_instance.el,this)
    }
    
}
// 监听所有层级属性
function Observer(dataObj){
    if(typeof dataObj !== 'object' || !dataObj) return  // 递归出口
    Object.keys(dataObj).forEach(key => {
        let value = dataObj[key]
        Observer(value) // 递归
        Object.defineProperty(dataObj,key,{
            configurable:true,
            enumerable:true,

            get(){
             console.log('读取属性');
             return value
            },
            set(val){
                console.log('设置属性');
                value = val
            }
        })
    });
}
// 模板解析
function Complie(element,vm){
  vm.$el = document.querySelector(element)
  const fragment = document.createDocumentFragment()
  let child
  debugger
  while(child = vm.$el.firstChild){
    console.log(child)
    fragment.append(child)
    
  }
}